<template>
	<view style="border-top: 2rpx solid rgba(0,0,0,0.04);">
		<view class="message" v-for="(item,index) in messages" :key="index">
			<view class="message__box" @click="goDetail(item.messages_url)">
				<image class="message__box__img" :src="item.messages_icon"  mode=""></image>
				<view class="message__box__content">
					<text class="message__box__content__title">{{item.messages_title}}</text>
					<text class="message__box__content__info">{{item.messages_total == 0?'':item.message_yes_info}}</text>
					<view class="message__box__content__total" v-if="item.messages_total != 0">
						<text class="message__box__content__total__num">{{item.messages_total <= 99?item.messages_total:'99+'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	let self
	export default {
		data() {
			return {
				messages: [
					{
						messages_title: '通知公告',
						messages_type: 'anntMsgTotal',
						messages_url: '/pages/message/anntMessage/anntMessage',
						messages_icon: '/static/icon/xitong_icon.png',
						message_no_info: '暂无通知公告哦',
						message_yes_info: '有新的通知公告',
						messages_total: 0,
					},
					{
						messages_title: '消息提醒',
						messages_type: 'sysMsgTotal',
						messages_url: '/pages/message/system/system',
						messages_icon: '/static/icon/xiaohao.png',
						message_no_info: '暂无系统消息哦',
						message_yes_info: '有新的系统消息',
						messages_total: 0,
					}
				]
			}
		},
		onLoad() {
			self = this
			self.init()
			uni.$on('message_info', function() {
				self.init()
			})
		},
		methods: {
			init() { // 初始化
			
				//通知公告列表
				self.$api.fSysAnnountCementListByUser().then((res) => {
					// console.log(res.data.result);
					self.messages.forEach(result => {
						if(result.messages_type == 'anntMsgTotal') {
							result.messages_total = res.data && res.data.result && res.data.result.anntMsgTotal || 0
						}
						if(result.messages_type == 'sysMsgTotal') {
							result.messages_total = res.data && res.data.result && res.data.result.sysMsgTotal || 0
						}
					})
					// console.log(self.messages);
				}).catch(e=>{
					console.log(e);
				})
			},
			/**
			 * @name 详情跳转
			 * @param {Object} url 地址
			 */
			goDetail:Debounce(
			function(url){
				uni.navigateTo({
					url: url
				})
			}),
		}
	}
</script>

<style lang="less">
	.message {
		width: 100%;
		&__box {
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			align-items: center;
			height: 146rpx;
			position: relative;
			&__img {
				width: 66rpx;
				height: 66rpx;
				border-radius: 16rpx;
				margin-left: 6rpx;
			}
			&__content {
				flex: 1;
				border-bottom: 2rpx solid rgba(0,0,0,0.04);
				height: 100%;
				margin-left: 16upx;
				position: relative;
				display: flex;
				align-items: center;
				&__title {
					color: #333333;font-size: 28rpx;margin-bottom: 12rpx;margin-top: 12rpx;
				}
				&__info {
					color: #88898A;font-size: 24rpx;margin-left: 24rpx;
				}
				&__total {
					width: 26rpx;height: 26rpx;border-radius: 50%;display: flex;align-items: center;justify-content: center;position: absolute;right: 28rpx;top: 50rpx;padding: 10rpx;background-color: rgb(255,0,0);
					&__num {
						font-size: 24rpx;color: #FFFFFF;
					}
				}
			}
		}
	}

</style>
